<template>
  <el-dialog v-model="dialogVisible" title="信息配置" width="30%">
    <el-form ref="ruleFormRef" :model="ruleForm" label-position="top" label-width="120px">
      <el-form-item>
        <el-checkbox-group v-model="ruleForm.rulesList">
          <el-checkbox v-for="item in baseList" :label="item.value" :disabled="defaultList.indexOf(item.value) > -1">{{
            item.name
          }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submitRules(ruleFormRef)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onUpdated, reactive, ref } from "vue"
import { enrollList, enrollOtherList } from "../mock"
import { FormInstance } from "element-plus";
import { RegisterInfoEnum, TeamMemberRoleEnum } from "../../config/enum";

const props = defineProps(["type", "defaultList"]);
const emits = defineEmits(["submitEnroll"]);
const ruleFormRef = ref<FormInstance>();
const dialogVisible = ref(false);
const defaultList = ref<string[]>([RegisterInfoEnum.ID_NAME, RegisterInfoEnum.GENDER, RegisterInfoEnum.PHONE_NUMBER, RegisterInfoEnum.NATIONALITY, RegisterInfoEnum.ID_NUMBER, RegisterInfoEnum.ID_PHOTO, RegisterInfoEnum.PLAYER_NUMBER]);
const ruleForm = reactive({
  rulesList: [],
})
const baseList = ref()

// 提交信息配置按钮
const submitRules = (formEl: FormInstance | undefined) => {
  emits("submitEnroll", ruleForm.rulesList);
  if (!formEl) return;
  formEl.resetFields();
}

// 取消按钮
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  dialogVisible.value = false;
}

onUpdated(() => {
  if (props.type === TeamMemberRoleEnum.PLAYER) {
    baseList.value = enrollList
  } else {
    baseList.value = enrollOtherList
  }
  setTimeout(() => {
    ruleForm.rulesList = props.defaultList;
  }, 100)
})
defineExpose({
  dialogVisible,
});
</script>
<style lang="scss" scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
